<template>
  <div>
        <div class="z-header width-75 tc">
            <div @click="$router.back(-1)" class="lt">
                <i class="iconfont icon-zuo m-t-18"></i>
            </div>
            <div class="fs-36 c-3">
                发布闲置
            </div>
        </div>
        <from>
            <div class="z-header">
                <div class="width-75 tl">
                    <span>标题</span>
                    <input type="text" placeholder="品类品牌型号都是买家喜欢搜索的" class="b-0" v-model="captio">
                </div>
            </div>
            <div class="width-75">
                 <textarea name="" id="" cols="30" rows="10" placeholder="描述一下宝贝的转手原因、入手渠道和使用感受" class="textarea" v-model="introduce">

                </textarea>
            </div>
            <div class="width-75">
                <!--<div class="add">
                </div>-->
                <changeImg v-on:arr="toshow"></changeImg>
                <div class="flex m-t-4 fs-24">
                    <div class="c-9">
                        <i class="iconfont icon-dingweiweizhi"></i>&nbsp;河南&nbsp;郑州&nbsp;金水区
                    </div>
                    <div>
                        全新宝贝
                    </div>
                </div>
            </div>   
        </from>
        <div class="index-blank m-t-18"></div>
        <div class="m-t-18 ">
            <ul>
                <li class="z-header bb-1-e">
                    <div class="width-75 flex" @click="checkSite(0)">
                        <div>价格</div>
                        <div>
                            <i class="iconfont icon-you1 fs-28"></i>
                        </div>
                    </div>
                </li>
                <li class="z-header bb-1-e">
                    <div class="flex width-75" @click="checkSite(1)">
                        <div>
                            <span>分类 : </span>
                            <span>{{classify}} 点击选择</span>
                        </div>
                        <div>
                            <i class="iconfont icon-you1 fs-28"></i>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div class="unused-button width-75 tc">
            <button class="b-c2 c-f" @click="confirm">
                确定
            </button>
        </div>
        <!--价格-->
        <div class="modal" v-show="flag">
            <nav class="m-t-18 tl modal-input">
                <ul>
                    <li class="z-header bb-1-e">
                        <div class="width-75">
                            <span>价格</span><input type="text" placeholder="请输入价格(必须是数字)" class="c-9 b-0" v-model="pric"><span>元</span>
                        </div>
                    </li>
                    <li class="z-header bb-1-e">
                        <div class="width-75">
                            <span>邮费</span><input type="text" placeholder="请输入价格(必须是数字)" class="c-9 b-0" v-model="mailPrice"><span>元</span>
                        </div>
                    </li>
                    <li class="z-header tc" @click="checkSite(0)">
                        确定
                    </li>
                </ul>
            </nav>
        </div>
        <!--分类-->
        <div class="modal" v-if="type">
            <div class="c-c2 picker-confirm" @click="checkSite(1)">确定</div>
            <mt-picker :slots="slots" @change="onValuesChange" class="unused-type" ></mt-picker>
        </div>
        
  </div>
</template>
<script>
import { z } from '../assets/js/common'
import { MessageBox } from 'mint-ui';
 export default {
    data() {
        return {
            slots: [
                {
                flex: 1,
                values: [],
                className: 'slot1'
                } 
            ],
            classify : "",
            flag: false,
            type:false,
            imgurl:[],     //图片路径
            towarr:[] ,  //暂时保存分类和分类ID
            typeID:"",
            captio:"", //标题
            introduce:"", //商品描述
            pric:"", //价格
            mailPrice:""//邮费
        };
    },
    methods: {
        onValuesChange(picker, values) {
            //现在闲置分类时调用的函数
            this.classify = values[0];
            console.log(this.classify);
            //循环towarr
            for(let i=0; i<this.towarr.length; i++){
                if(this.classify == this.towarr[i][0]){
                    this.typeID = this.towarr[i][1];
                }
                
            }
          
        },
        checkSite(text) {
            if(text == 0){
                this.flag = !this.flag;
            }else if(text == 1){
                this.type = !this.type;
            }   
        },
        toshow(msg) {
            // this.msg = msg;
            this.imgurl.push(msg);//将从后台返回过来的数据添加到imgurl的栈顶
        },
        confirm(){
            var params = new URLSearchParams();
            params.append("goodsType.goodsTypeId", this.typeID);
            params.append("caption", this.captio);
            params.append("introduce", this.introduce);
            params.append("school.schoolId",localStorage.schoolId);
            params.append("price",this.pric);
            params.append("mailPrice",this.mailPrice);
            params.append("images",this.imgurl);
            this.$http({
                method:"post",
                url: localPath + '/goods/addGoods',
                data:params
            }).then((data)=>{
                MessageBox.alert(data.data.message);
                console.log(data.data);
            }).catch((error)=>{
                console.log(error);
            })
        },
        goodsTypeId(){
            this.$http({
                method:"post",
                url: localPath + '/goods/selectAllGoodsType'
            }).then((data)=>{
                console.log(data.data);
               
               for(var i=0; i<data.data.length; i++){
                   console.log(data.data[i].goodsTypeName);
                    // console.log(i);
                    //循环后台数据保存到this.slots[0].values.push 然后显示到页面上面
                    this.slots[0].values.push(data.data[i].goodsTypeName);
                    //把分类和分类ID放到towarr的数组里面
                    this.towarr.push([data.data[i].goodsTypeName,data.data[i].goodsTypeId]); 
               }
              
            }).catch((error)=>{
                console.log(error);

            })
        },
     
    },
    mounted(){
        this.goodsTypeId();
        document.addEventListener(z());
    }
};
</script>
<style>
 
.modal-input{
    position: fixed;
    bottom: 0;
    background: #fff;
}
        
.picker-slot{
    font-size: .24rem;
}
.d-n{
    display: none;
}
.unused-type .picker-items{
    position: absolute;
    width: 100vw;
    bottom: 0px;
    background: #ffffff;
}
.picker-confirm{
    position: absolute;  
    bottom: 140px;
    z-index: 999;
    right: 30px;
}
.unused-button{
    position: absolute;
    bottom: 0px;
}
.unused-button > button{
    height: .7rem;
    width: 100%;
}
</style>
